<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar bgColor="#f9f9f9">
			<template v-slot:left>
				<picker mode="region">
					广州
				</picker>
			</template>

			<template v-slot:center>
				<text>皮球</text>
			</template>

		</u-navbar>
		<!-- 搜索 -->
		<view style="margin-top: 23%; display: flex;justify-content: space-around;">
			<view style="width: 70%; height: 50rpx;">
				<u-search bgColor="#ffffff" searchIconSize="50" borderColor="#EEEEEE" height="70" :showAction="false"
					placeholder="搜索球场或关键字"></u-search>
			</view>
			<view style="width: 100rpx;font-size: 80rpx;">
				<view @click="show = true" class="add-button">
					<text class="add-icon">+</text>
				</view>
			</view>

		</view>
		<!-- 选择距离 -->
		<view class="u-page__tag-item padding10-30">
			<view :style="{'background': item.checked ? '#4A43EC' : '#F3F4F5'}" class="rangeBox"
				v-for="(item, index) in radios" :key="index">
				<u--text @click="radioClick(index)" :color="item.checked ? '#ffffff' : '#939394'" lineHeight="70"
					align="center" size="25" :text="item.range"></u--text>

			</view>

		</view>
		<!-- 球场 -->
		<view class="stadiumBox">
			<!-- 球场信息 -->
			<view class="stadiumInfo">
				<view class="padding10-30">
					<u--image radius="20" src="https://cdn.uviewui.com/uview/album/1.jpg" width="160px"
						height="160px"></u--image>
				</view>

				<view style="color: #9593A4;">
					<view class="padding10-30">
						<u--text bold size="40" text="豪华球场"></u--text>
					</view>
					<view class="padding10-30" style="display: flex;">
						<u-icon name="account-fill"></u-icon>
						<text class="size-22">5人场 | 7人场 | 9人场</text>

					</view>
					<view class="padding10-30" style="display: flex;">
						<u-icon name="account-fill"></u-icon>
						<text class="size-22">13.0KM</text>
					</view>
					<view class="padding10-30" style="display: flex;">
						<u-icon name="account-fill"></u-icon>
						<text class="size-22" overflow="ellipsis" :max-lines="1">广东省广州市天河黄浦区什么什么</text>
					</view>
				</view>
			</view>
			<u-divider></u-divider>
			<!-- 场次 -->

			<view>
				<view style="display: flex;justify-content: left;" class="padding10-30">
					<u--text prefixIcon="gift-fill" bold size="40" text="热门场次"></u--text>
				</view>
				<view style="display: flex;justify-content: space-around; padding: 20rpx; 5rpx">
					<view class="gameInfo" @click="toStadiumDetail()">
						<view class="padding10-30">
							<u--text size="28" text="本周六16:00-18:00"></u--text>
						</view>
						<view style="display: flex;justify-content: left;" class="padding10-30">
							<view style="margin-right: 2%;" v-for="item in 2" class="tag">
								<text>生死局</text>
							</view>
						</view>
						<view style="color: #9593A4;">
							<view class="padding10-30">
								<text class="size-22" space="ensp">状 态：暂未成局</text>
							</view>
							<view class="padding10-30">
								<text class="size-22" space="ensp">报名人数：12</text>
							</view>
							<view class="padding10-30">
								<text class="size-22" space="ensp">成局人数：16-30</text>
							</view>
						</view>
					</view>

					<view class="gameInfo">
						<view class="padding10-30">
							<u--text size="28" text="本周六16:00-18:00"></u--text>
						</view>
						<view style="display: flex;justify-content: left;" class="padding10-30">
							<view style="margin-right: 2%;" v-for="item in 2" class="tag">
								<text>生死局</text>
							</view>
						</view>
						<view style="color: #9593A4;">
							<view class="padding10-30">
								<text class="size-22" space="ensp">状 态：暂未成局</text>
							</view>
							<view class="padding10-30">
								<text class="size-22" space="ensp">报名人数：12</text>
							</view>
							<view class="padding10-30">
								<text class="size-22" space="ensp">成局人数：16-30</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>



		<view class="stadiumBox">
			<!-- 球场信息 -->
			<view class="stadiumInfo">
				<view class="padding10-30">
					<u--image radius="20" src="https://cdn.uviewui.com/uview/album/1.jpg" width="160px"
						height="160px"></u--image>
				</view>

				<view style="color: #9593A4;">
					<view class="padding10-30">
						<u--text bold size="40" text="豪华球场"></u--text>
					</view>
					<view class="padding10-30" style="display: flex;">
						<u-icon name="account-fill"></u-icon>
						<text class="size-22">5人场 | 7人场 | 9人场</text>

					</view>
					<view class="padding10-30" style="display: flex;">
						<u-icon name="account-fill"></u-icon>
						<text class="size-22">13.0KM</text>
					</view>
					<view class="padding10-30" style="display: flex;">
						<u-icon name="account-fill"></u-icon>
						<text class="size-22" overflow="ellipsis" :max-lines="1">广东省广州市天河黄浦区什么什么</text>
					</view>
				</view>
			</view>
			<u-divider></u-divider>
			<!-- 场次 -->

			<view>
				<view @click="handleWxLogin()" style="display: flex;justify-content: left;" class="padding10-30">
					<u--text prefixIcon="gift-fill" bold size="40" text="热门场次"></u--text>
				</view>
				<view style="display: flex;justify-content: space-around; padding: 20rpx; 5rpx">
					<view class="gameInfo">
						<view class="padding10-30">
							<u--text size="30" text="本周六16:00-18:00"></u--text>
						</view>
						<view style="display: flex;justify-content: left;" class="padding10-30">
							<view style="margin-right: 2%;" v-for="item in 2" class="tag">
								<text>生死局</text>
							</view>
						</view>
						<view style="color: #9593A4;">
							<view class="padding10-30">
								<text class="size-22" space="ensp">状 态：暂未成局</text>
							</view>
							<view class="padding10-30">
								<text class="size-22" space="ensp">报名人数：12</text>
							</view>
							<view class="padding10-30">
								<text class="size-22" space="ensp">成局人数：16-30</text>
							</view>
						</view>
					</view>

					<view class="gameInfo">
						<view class="padding10-30">
							<u--text size="30" text="本周六16:00-18:00"></u--text>
						</view>
						<view style="display: flex;justify-content: left;" class="padding10-30">
							<view style="margin-right: 2%;" v-for="item in 2" class="tag">
								<text>生死局</text>
							</view>
						</view>
						<view style="color: #9593A4;">
							<view class="padding10-30">
								<text space="ensp">状 态：暂未成局</text>
							</view>
							<view class="padding10-30">
								<text space="ensp">报名人数：12</text>
							</view>
							<view @click="list()" class="padding10-30">
								<text space="ensp">成局人数：16-30</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

		<tabbar :i="0"></tabbar>
		<!-- 弹出层 -->
		<u-popup :show="show" mode="bottom"
			:customStyle="{'width':'100%','height':'500rpx','border-radius': '30px 30px 0px 0px'}">
			<view class="padding10-40">
				<u--text lineHeight="100rpx" @click="toAddBallGame(1)" align="center" color="#000000" size="27"
					text="个人身份创建"></u--text>
				<u-line></u-line>
				<u--text lineHeight="100rpx" @click="toAddBallGame(2)" align="center" color="#000000" size="27"
					text="球队身份创建"></u--text>
				<u-line></u-line>
				<u--text @click="show =false" lineHeight="100rpx" align="center" color="#000000" size="27"
					text="取消"></u--text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { listWxUser } from '@/api/login'
	import tabbar from '@/components/tabbar.vue' //这里就是在页面中引入组件路径的写法
	export default {
		components: {
			tabbar //这里是组件中name名称，在import引入的时候名称要一致
		},
		data() {
			return {
				show: false,
				range: '', //距离
				radios: [{
						checked: true,
						range: '不限'
					},
					{
						checked: false,
						range: '5公里'
					},
					{
						checked: false,
						range: '10公里'
					},
					{
						checked: false,
						range: '20公里'
					}
				],
			}
		},
		onLoad() {
			wx.getLocation({
				isHighAccuracy: true,
				success: (res) => {
					console.log(res)
				
				}
			})
			

		
		},
		methods: {
			list(){
				listWxUser().then(res=>{
					console.log(res,'======');
				})
			},
			radioClick(name) {
				// wx.showModal({
				//     title: '提示',
				//     content: '这是一个模态弹窗',
				//     success: function (res) {
				//       if (res.confirm) {//这里是点击了确定以后
				//         console.log('用户点击确定')
				//       } else {//这里是点击了取消以后
				//         console.log('用户点击取消')
				//       }
				//     }
				//   })
				this.radios.map((item, index) => {
					item.checked = index === name ? true : false
				})
			},
			// 跳转到球场详情
			toStadiumDetail() {
				uni.navigateTo({
					url: '/pages/stadium/stadiumDetail'
				})
			},

			// 跳转
			toAddBallGame(i) {
				this.show = false
				console.log('222');
				uni.navigateTo({
					url: "/pages/ballGame/addBallGame?status=" + i
				})
			},
			// 跳转到用户界面
			toOther() {
				uni.navigateTo({
					url: "/subpkg/me/other"
				})
			},
			handleWxLogin(){
				wx.login({
					success: (res) => {
						console.log(res);
						if (res.code) {
							this.wxLogin(res.code)
						} else {
							console.error('微信登录失败！' + res.errMsg);
						}
					},
					fail: (err) => {
						console.error('wx.login 调用失败', err);
					}
				});
			},
			
			// 授权登录
			async wxLogin(code) {
				this.$store.dispatch('wxLogin', code).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {
					if (this.captchaEnabled) {
						this.getCode()
					}
				})
			},
		}
	}
</script>

<style>
	.u-page__tag-item {
		margin-top: 3%;
		display: flex;
		justify-content: space-around;
		text-align: center;

	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
		padding-bottom: 600rpx;
	}

	.stadiumBox {

		width: 95%;
		margin: 5% auto;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0px 2px 25px 0px rgba(83, 89, 144, 0.1);
		/* padding: 10rpx; */
		padding: 20rpx 0;
	}

	.stadiumInfo {
		display: flex;
		justify-content: space-around;
	}

	.gameInfo {
		width: 310px;
		height: 300rpx;
		border-radius: 24rpx;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 2rpx solid #EEEEEE;
		box-shadow: 0px 20px 40px 0px rgba(211, 209, 216, 0.3);
		margin: 0 7rpx;

	}

	.padding10-30 {
		padding: 10rpx 30rpx;
	}

	.tabInfo {
		text-align: center;
		position: fixed;
		top: 85%;
		left: 10%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 80%;
		height: 130rpx;
		border-radius: 40rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 8px 11px 20px 0px rgba(198, 198, 198, 0.33);
	}

	.add-button {
		width: 80rpx;
		height: 80rpx;
		background-color: #4A43EC;
		/* 按钮的背景颜色 */
		border-radius: 10px;
		/* 圆形按钮 */
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		/* 按钮颜色 */
		font-size: 23px;
		/* 按钮文本大小 */
	}

	.rangeBox {
		border-radius: 8px;
		width: 23%;
		height: auto;
		background: #F3F4F5;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>